/*
    myAjax 简单封装的ajax函数
        @param  string      url     请求的url地址
        @param  string      type    请求方式 默认值是 get
        @param  string      data    请求携带的参数 默认值是 空字符串
        @param  function    callback  ajax请求结束并且成功后 执行的回调函数 默认值是空函数 
*/ 

function myAjax( url , type = 'get' , data = '' , callback = function(){} ){
    // 创建 ajax实例化对象
    const xhr = new XMLHttpRequest();

    // get方式 和 post方式 执行不同的 ajax设定
    if( type.toLowerCase() === 'get' ){
        // 输入的请求方式 是 get 执行 get方式ajax设定
        xhr.open( 'get' , `${url}?${data}` );
        // 发送设定好的ajax请求
        xhr.send();

    }else if( type.toLowerCase() === 'post' ){
        // 输入的请求方式 是 post 执行 post方式ajax设定
        xhr.open( 'post' , url );
        // 设定请求头编码格式
        xhr.setRequestHeader('Content-Type' , 'application/x-www-form-urlencoded') ;
        // 发送设定好的ajax请求 携带参数
        xhr.send( data );
    }

    // 接收结果 执行 回调函数
    xhr.onload = function(){
        // 当 ajax状态码是4 http状态码是200-299 
        // 请求结束 并且 成功 并且 解析了响应体数据
        if (xhr.readyState === 4 && /^2\d{2}$/.test( xhr.status ) ) {
            // 触发执行回调函数
            // 回调函数 不能直接使用 已经定义的 xhr.response 等数据
            // 可以通过 传参方式 输入 要执行调用的数据

            // 此时 是在 调用执行回调函数
            // 可以输入实参
            callback( xhr.response ) ;
        }
    }
}

/*
    创建一个 promise实例化对象 执行异步ajax程序


*/

function myPromiseJQueryAjax( url , type = 'get' , data = {} , dataType = 'text'  ){
    // 创建一个promise对象
    const p = new Promise( function( fulfilled , rejected ){
        // 通过 jQuery函数 完成 ajax请求
        $.ajax({
            url: url , 
            type: type , 
            data: data ,
            dataType: dataType ,
            success: function( resSuccess ){ fulfilled( resSuccess ) } ,
            error: function( resError ){ rejected( resError ) } ,  
        })
    });

    // 最终 return 返回 promise实例化对象
    return p ;
}